<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="../site.webmanifest">
  <link rel="apple-touch-icon" href="../icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="../css/normalize.css">
  <link rel="stylesheet" href="../css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>
<style>
  .row{
    width:100%;
    text-align:center;
  }
  .row .con {
    max-width:400px;
    margin: 0 auto;
  }
  .row .con:after{
    content:'';
    clear:both;
    display:block;
  }
  .row .con .col {
    float:left;
    width:12.5%;
    text-align:center;
  }
  .row .con .col span{
    width:40px;
    height:40px;
    background-color:red;
    display:inline-block;
  }
</style>
<body>
  <div class='row'>
    <div class='con'>
      <div class="col">
        <span class="red"></span>
      </div>
      <div class="col">
        <span></span>
      </div>
      <div class="col">
        <span></span>
      </div>
      <div class="col">
        <span></span>
      </div>
      <div class="col">
        <span></span>
      </div>
      <div class="col">
        <span></span>
      </div>
      <div class="col">
        <span></span>
      </div>
      <div class="col">
        <span></span>
      </div>
    </div>
  </div>
</body>

</html>
